import React from 'react'

import './Footer.css'
export default function Footer({ list, updateAllTodo, clearAllDone }) {
  // 计算已经完成的任务个数
  const doneTotal = list.filter((item) => item.isDone).length
  const allTotal = list.length

  // 计算任务总数
  return (
    <div className="todo-footer">
      <label>
        <input
          type="checkbox"
          checked={allTotal === doneTotal}
          // 由于这次updateAllTodo无需传入实参,只要点击全选,让upadteAllTodo调用即可,所以直接作为onchange的事件处理函数
          onChange={updateAllTodo}
        />
      </label>
      <span>
        <span>已完成 {doneTotal}</span> / 全部 {allTotal}
      </span>
      <button className="btn btn-danger" onClick={clearAllDone}>
        清除已完成任务
      </button>
    </div>
  )
}
